/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:host {
    inline-size: var(--spectrum-color-loupe-width);
    block-size: var(--spectrum-color-loupe-height);
    transform: translateY(8px);
    transform: translateY(var(--mod-colorloupe-animation-distance, 8px));
    opacity: 0;
    transform-origin: bottom;
    pointer-events: none;
    filter: drop-shadow(var(--mod-colorloupe-drop-shadow-x, var(--spectrum-drop-shadow-x)) var(--mod-colorloupe-drop-shadow-y, var(--spectrum-color-loupe-drop-shadow-y)) var(--mod-colorloupe-drop-shadow-blur, var(--spectrum-color-loupe-drop-shadow-blur)) var(--mod-colorloupe-drop-shadow-color, var(--spectrum-color-loupe-drop-shadow-color)));
    transition:
        transform 0.1s ease-in-out,
        opacity 0.125s ease-in-out;
    position: absolute;
    inset-block-end: calc(var(--spectrum-color-handle-size) - var(--spectrum-color-handle-outer-border-width) + var(--mod-colorloupe-offset, var(--spectrum-color-loupe-bottom-to-color-handle)));
    inset-inline-end: calc(50% - var(--spectrum-color-loupe-width) / 2);
}

:host:dir(rtl),
:host([dir="rtl"]) {
    inset-inline-end: calc(50% - var(--spectrum-color-loupe-width) / 2 - 1px);
}

:host([open]) {
    opacity: 1;
    transform: translate(0);
}

:host .is-disabled {
    opacity: 0;
}

.spectrum-ColorLoupe-inner-border {
    fill: var(--spectrum-picked-color);
    stroke: var(--mod-colorloupe-inner-border-color, var(--spectrum-color-loupe-inner-border));
    stroke-width: var(--mod-colorloupe-inner-border-width, var(--spectrum-color-loupe-inner-border-width));
}

.spectrum-ColorLoupe-outer-border {
    fill: none;
    stroke: var(--highcontrast-colorloupe-outer-border-color, var(--mod-colorloupe-outer-border-color, var(--spectrum-color-loupe-outer-border)));
    stroke-width: calc(var(--mod-colorloupe-outer-border-width, var(--spectrum-color-loupe-outer-border-width)) + 2px);
}

.spectrum-ColorLoupe-checkerboard-pattern {
    fill: var(--spectrum-opacity-checkerboard-square-dark);
}

.spectrum-ColorLoupe-checkerboard-background {
    fill: var(--spectrum-opacity-checkerboard-square-light);
}

.spectrum-ColorLoupe-checkerboard-fill {
    fill: var(--spectrum-colorloupe-checkerboard-fill);
}

@media (forced-colors: active) {
    :host {
        --highcontrast-colorloupe-outer-border-color: CanvasText;
    }
}
